/**
  计算机等级考试-名单规则设置-黑名单设置
*/
<template>
  <div class="black-list-setting-container">
    <el-card shadow="never" v-loading="loading" body-style="padding: 24px;" class="card-margin">
      <h1 class="condition-title">{{ $t('listRuleSetting.blackListSetting') }}</h1>
      <div class="edu-opertion-bar sub-title">
        <div class="float-left">
          <el-input
            v-model.trim="queryForm.condition.student"
            :placeholder="$t('subjectCompetitionBase.studentIdOrName')"
            style="width:250px"
            @keyup.enter.native="onSubmit">
              <i slot="suffix"
                class="el-icon-search"
                style="margin-top:10px;cursor:pointer"
                @click="onSubmit">
              </i>
          </el-input>
        </div>
        <div class="float-right" style="display: flex;">
          <el-dropdown v-if="permitToBatchImport" @command="batchImport">
            <el-button>
              {{ $t('subjectCompetitionBase.batchImport') }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <!-- 下载模板 -->
              <el-dropdown-item command="1">
                {{ $t('subjectCompetitionBase.downloadTemplate') }}
              </el-dropdown-item>
              <!-- 批量导入 -->
              <el-dropdown-item command="2">
                <el-upload
                  ref="importInfo"
                  class="upload-demo"
                  action="/api/competitionservice/examBlackList/importBlack"
                  :data="uploadConfig"
                  :show-file-list="false"
                  :before-upload="handlerBeforeUpload"
                  :on-success="(response, file, fileList) => handlerUploadSuccess(response, file, fileList)">
                  {{ $t('subjectCompetitionBase.batchImport') }}
                </el-upload>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <edu-table :pagination="false" :order="false" :selection="false" :tooltipEffect="tooltipEffect" stripe :data="dataList" size="mini" @selection-change="handleSelectionChange">
        <edu-table-column :label="$t('subjectCompetitionBase.studentId')" prop="studentId"></edu-table-column>
        <edu-table-column :label="$t('subjectCompetitionBase.name')" prop="studentName"></edu-table-column>
        <edu-table-column :label="$t('subjectCompetitionBase.sex')" prop="sexI18n"></edu-table-column>
        <edu-table-column :label="$t('subjectCompetitionBase.college')" prop="facultyI18n"></edu-table-column>
        <edu-table-column :label="$t('listRuleSetting.schoolStatus')" prop="leaveSchoolI18n"></edu-table-column>
        <edu-table-column :label="$t('listRuleSetting.studentStatus')" prop="registrationStatusI18n"></edu-table-column>
        <edu-table-column :label="$t('common.text.operation')" fit width="300">
          <template slot-scope="scope">
            <el-button type="text" v-if="permitToDelete" @click="deleteBlackListInfo(scope.row)">{{ $t('common.btn.delete') }}</el-button>
          </template>
        </edu-table-column>
      </edu-table>
      <el-row type="flex" class="row-bg" justify="end">
        <el-col>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryForm.pageNum_"
            :page-sizes="[20, 40, 80, 100]"
            :page-size="queryForm.pageSize_"
            layout="total, sizes, prev, pager, next, jumper"
            :total="queryForm.total_"
            style="float:right;margin-top:10px"
        ></el-pagination>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import baseUrl from 'common/src/api/subjectCompetition/env';
import subjectCompetitionApi from 'common/src/api/subjectCompetition/subjectCompetition';
export default {
  components: {
  },
  data () {
    return {
      auths: [],
      permitToBatchImport: false,
      permitToDelete: false,
      uploadConfig: {
        examCategory: 6
      },
      queryForm: {
        pageNum_: 1,
        pageSize_: 20,
        total_: 0,
        condition: {
          student: '',
          examCategory: 6
        }
      },
      dataList: []
    }
  },
  created() {
    // 获取当前用户auths权限
    if (localStorage.getItem("sessiondata")) {
      if (JSON.parse(localStorage.getItem("sessiondata")).auths) {
        this.auths = JSON.parse(localStorage.getItem("sessiondata")).auths
      }
    }
    this.onSubmit()
  },
  methods: {
    getListData() {
      this.queryForm.condition.student = this.queryForm.condition.student.trim()
      subjectCompetitionApi.selectBlackList(this.queryForm).then((res) => {
        this.dataList = res.data.list
        this.queryForm.total_ = res.data.total_
      })
    },
    onSubmit() {
      this.queryForm.pageNum_ = 1
      this.getListData()
    },
    // 批量导入
    batchImport(type) {
      // 下载模板
      if (type === '1') {
        subjectCompetitionApi.getPictureTemplate()
      }
    },
    // 上传前的回调
    handlerBeforeUpload(file) {
      if (file) {
        const fileSizeFlag = file.size && file.size / 1024 / 1024 < 10
        const uploadFlag = file.type === 'application/vnd.ms-excel'
        if (!uploadFlag) {
          window.vueApp.showMsgBox({
            message: this.$t("subjectCompetitionBase.uploadXLSFileOnly"),
            callback: () => {
            }
          })
          return false
        }
        if (!fileSizeFlag) {
          window.vueApp.showMsgBox({
            message: this.$t("subjectCompetitionBase.uploadFileSizeLimit"),
            callback: () => {
            }
          })
          return false
        }
      }
    },
    // 获取导入的数据
    handlerUploadSuccess(response, file, fileList) {
      if (response.code === 200) {
        this.onSubmit()
      } else {
        window.vueApp.showMsgBox({
          message: response.msg,
          callback: () => {
          }
        })
      }
    },
    // 删除黑名单
    deleteBlackListInfo(row) {
      this.$delConfirm().then(_ => {
        subjectCompetitionApi.deleteBlackList({
          "studentId": row.studentId,
          "calendarId": row.calendarId,
          "examCategory": row.examCategory,
          "educationTag": row.educationTag
        }).then(_ => {
          this.$message({
            type: 'success',
            message: this.$t('subjectCompetitionBase.operateSuccessfully')
          })
          this.onSubmit()
        })
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      this.queryForm.pageSize_ = val
      this.getListData()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum_ = val
      this.getListData()
    }
  },
  watch: {
    auths: {
      handler(newVal) {
        if (newVal && Array.isArray(newVal) && newVal.length > 0) {
          newVal.some(item => {
            if (item.authCode === 'computer-list-rule-set-batchImport') {
              this.permitToBatchImport = true
            }
            if (item.authCode === 'computer-list-rule-set-delete-black') {
              this.permitToDelete = true
            }
          })
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
